<template>
  <el-container style="background-color:aliceblue;">
    <el-header style="height: 100%;padding: 0;background-color: aliceblue;">
        <div style="background-color: cornflowerblue;height: 40px;">
          <el-col :span="8"><div class="index-title" style="line-height: 40px;color: white;">
            <router-link style="margin-right: 30px;color: white" :to="'/index'">数字后勤服务大厅</router-link>
            <a>运架中心</a>
            <a>服务监督</a>
          </div></el-col>
          <el-col :span="8"  style="line-height: 40px;color: white;"><div class="index-title"><a>膳食中心</a></div></el-col>
          <el-col :span="8">
            <div style="line-height: 40px;color: white;">
                <router-link style="margin-right: 30px;" :to="'/PersonalCenter'">{{user.accountName}}</router-link>
            </div>
          </el-col>
        </div>

          <el-col :span="18"><div style="margin-top: 20px;"><img src="../../static/img/logo-repair.png"/></div></el-col>
          <el-col :span="6"></el-col>

    </el-header>
  <el-form
  :model="submitForm"
  :rules="rules"
  ref="submitForm">
    <el-form-item prop="largeHeadlineId">
      <el-col :span="2">
        <span>问题分类</span>
      </el-col>
      <el-col :span="7">
        <el-select v-model="submitForm.largeHeadlineId">
          <el-option v-for="item in headlineList"
          :key="item.id"
          :label="item.guidanceName"
          :value="item.id">
          </el-option>
        </el-select>
      </el-col>
    </el-form-item>
    <el-form-item prop="guidancetitle">
      <el-col :span="1">
        <span>标题</span>
      </el-col>
      <el-col :span="7">
        <el-input v-model="submitForm.guidancetitle"></el-input>
      </el-col>
    </el-form-item>
    <el-form-item prop="guidancecontent">
      <quill-editor
         ref="myQuillEditor"
         v-model="submitForm.guidancecontent"
         :options="editorOption"
         @blur="onEditorBlur($event)"
         @focus="onEditorFocus($event)"
         @ready="onEditorReady($event)"/>
    </el-form-item>
    <el-form-item>
      <el-button @click="submit('submitForm')">提交</el-button>
    </el-form-item>
  </el-form>
  </el-container>
</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import { quillEditor } from 'vue-quill-editor'
  export default{
    name:"guidanceAdd",
    components: {
      quillEditor
    },
    data(){
      return{
        headlineSelect:"",
        headlineList:[],
        // title:"",
        // content:"",
        editorOption: {
          // Some Quill options...
          theme: "snow",
          placeholder: "请输入正文"
        },
        rules:{
          guidancetitle:[
            {required:true,message:"标题不能为空",trigger:"blur"}
          ],
          guidencecontent:[
            {required:true,message:"正文不能为空",trigger:"blur"},
            {max:1000,message:"最大长度1000字",trigger:"blur"}
          ],
          largeHeadlineId:[
            {required:true,message:"请选择小标题",trigger:"blur"}
          ]
        },
        user:"",
        submitForm:{
          guidancetitle:"",
          guidancecontent:"",
          largeHeadlineId:""
        }
      }
    },
    methods:{
      //失去焦点事件
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      //获得焦点事件
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      // 准备富文本编辑器
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      //内容改变事件
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.submitForm.content = html
      },
      submit(formname){
        this.$refs[formname].validate((valid) => {
          if (valid) {
            this.$http.post("/repairGuidance2/addGuidance",this.submitForm).then(resp=>{
              if (resp.data.code==200){
                alert("添加成功")
                this.$router.push("/serviceGuide")
              }
              else{
                alert("异常错误")
              }
            })
          } 
          else {
            alert('输入不合法');
          }
        });
      },
      getLargeTitle(){
        this.$http.get("/repairGuidance2/getLargesHeadline").then(resp=>{
          this.headlineList = resp.data.data
        })
      }
    },
    created() {
        this.getLargeTitle()
        this.user =JSON.parse(localStorage.getItem("user")).data
    }
  }
</script>

<style>
  a {text-decoration:none};
</style>
